import React from 'react';
import * as SysRoleAction  from '../../actions/SysRoleAction';
import { connect }  from 'react-redux';


class BackgroundSettingRole extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  componentDidMount() {
    var self = this;
    this.props.dispatch(
      SysRoleAction.loadSysRoleDataAsync()
    )
  }


 onSelectClick(data){
   this.props.onSelectRoleClick(data);
 }


  renderList() {
    var self = this;
    var content = [];
    // console.log(this.props.data)
    if (this.props.data && this.props.data.length > 0) {
      this.props.data.forEach(function(data, index) {
        content.push((
          <tr onClick={(event)=>self.onSelectClick(data)}>
            <td>{data.name}</td>
          </tr>
        ))
      })
    }
    return content
  }


  render() {
    var self = this;
    return (
      <div className="modal fade" id="DemoSettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="demo-modal-label">添加角色名</h4>
            </div>
            <div className="modal-body">
              <div className="form-group">
                <div className="message-eventkey-list">
                  <table className="table table-bordered">
                    <thead>
                      <tr className="table-title">
                        <th>角色名称</th>
                      </tr>
                    </thead>
                    <tbody>
                        {this.renderList()}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return { data: state.sysRoles }
}

export default connect(mapStateToProps)(BackgroundSettingRole);
